
const app = getApp() //app.globalData

//index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
      date:'请选择日期',
      time:'时间',
      tableData:null,
      option:null,
    },

    bindDateChange(e) {
      this.setData({
        date: e.detail.value
      })
    },
    bindTimeChange(e) {
      this.setData({
        time: e.detail.value
      })
    },

    setChart() {
     let data = this.data.tableData.sort(function(a,b){
        let x=a['aqi'];
        let y=b['aqi'];
        // return y - x; //从大到小
      return x-y; //从小到大
    });
    let xdata = [0];
    let ydata = [0];
    for (let i = 0; i < data.length; i++) {
      ydata.push(data[i].aqi);
      xdata.push(i+1);
    }
    let Xinterval
    if(xdata.length<200){
       Xinterval = 9
    }else if(xdata.length<500 && xdata.length>200){
       Xinterval = 49
    }else{
       Xinterval = 199
    }
    this.setData({
      option:{
        grid:{
          top:"9%",
          left:"10%",
          bottom:"2%"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        xAxis: {
          show: true,
          data: xdata,
          axisLabel:{
            interval:Xinterval,
            showMinLabel: false,
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          axisLine: {
            show: false ,//y轴线消失
          },
          splitLine:{
            lineStyle:{
              type:'dashed'//设置网格线类型 dotted：虚线   solid:实线
            },
            show:true //隐藏或显示
          },
          axisLabel: {
            interval:15,
            left:5,
            align:'left',
            margin: 30
            // textStyle: {
            //   color: '#333',
            // }
          },
          axisTick: {
            show: false //y轴坐标点消失
          },
        },
        // dataZoom: [//给x轴设置滚动条
        //   {
        //     show: false,
        //     realtime: true,
        //     start: 0,
        //     end: 100
        //   },
        //   {
        //     type: 'inside',
        //     realtime: true,
        //     start: 0,
        //     end: 100
        //   }
        // ], 
        series: [{
          name: 'AQI',
          type: 'bar',
          data: ydata,
          itemStyle: {
            normal: {
              borderRadius: [31, 31, 0, 0],
              color: function(params) {
                if (params.value > 0 && params.value <= 50) {
                  return "#00E8D1";
                } else if (params.value > 50 && params.value <= 100) {
                  return "#FFD416";
                } else if (params.value > 100 && params.value <= 150) {
                  return "#FF923D";
                } else if (params.value > 150 && params.value <= 200) {
                  return "#FF4290";
                } else if (params.value > 200 && params.value <= 300) {
                  return "#D20000";
                } else if (params.value > 300 && params.value <= 450) {
                  return "#7F0000";
                }
              }
            }
          },
        }]
      }
    })
    
    },

    searchMsg() {
        if(this.data.date == '请选择日期'){
            wx.showToast({
                icon:'none',
                title: '请选择日期',
            })
            return
        }else if(this.data.time == '时间'){
            wx.showToast({
                icon:'none',
                title: '请选择时间',
              })
            return
        }
        app.globalData.http.get('/ai-sensing-back-service/api/publishData/sort',{
            time: this.data.date + ' ' + this.data.time,
            type: 1,
            param: 'aqi',
        }).then(res=>{
            this.setData({
                tableData:res.data.items
            })
            this.setChart()
        })
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
      wx.setNavigationBarTitle({
        title: '统计排名',
      })

    },
  
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {
  
    },
  
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {
  
    },
  
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
  
    },
  
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
  
    },
  
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {
  
    }
  })